<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
        <li class="layui-this">房间类型</li>
        <li>房间号</li>
    </ul>
    <div class="layui-tab-content">
        <!-- 房间类型查询 -->
        <div class="layui-tab-item layui-show">
            <div class="layui-fluname">
                <div class="layui-card">
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <input type="text" class="layui-input" id="RoomTypeDateRange" autocomplete="off"
                                       placeholder="点击选择日期">
                            </div>
                            <div class="layui-inline">
                                <input type="text" id="RoomTypeName" placeholder="请输入房间类型" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <!-- 搜索按钮 -->
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-list" id="RoomTypeSearch">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <table id="RoomTypeTable" lay-filter="RoomTypeTable"></table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 房间查询 -->
        <div class="layui-tab-item">
            <div class="layui-fluname">
                <div class="layui-card">
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                        <div class="layui-form-item">
                            <div class="layui-inline" name="pageName"></div>
                            <div class="layui-inline">
                                <input type="text" class="layui-input" id="RoomDateRange" autocomplete="off"
                                       placeholder="点击选择日期">
                            </div>
                            <div class="layui-inline">
                                <input type="text" id="RoomName" placeholder="房间号/房间类型" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <!-- 搜索按钮 -->
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-list" id="RoomSearch">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <table id="RoomTable" lay-filter="RoomTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="../../layuiadmin/layui/layui.js"></script>
<script>
    //路径配置 - 手动填写
    var findPageURLNot = "/depotInOrder/findPage";
    var findPageURLYes = "/depotInOrder/findPageYes";
    var addURL = "/depotInOrder/add";
    var toUpdateURL = "/depotInOrder/findOne";
    var updateURL = "/depotInOrder/update";
    var deleteURL = "/depotInOrder/delete";
    var detailsYesURL = "/depotInOrder/findYesDetails";
    //页面配置 - 不用填写
    var entityType = "";
    var entityURL = "";
    var entityId = "";

    //layui配置
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'util', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table
            , layer = layui.layer
            , laydate = layui.laydate
            , util = layui.util;

        //时间组件
        laydate.render({
            elem: '#RoomTypeDateRange'
            , range: true
        });


        //监听房间类型搜索
        $("#RoomTypeSearch").on('click', function (data) {
            //执行重载
            table.reload('RoomTypeTable', {
                method: 'post'
                , where: {
                    "name": $("#RoomTypeName").val(),
                    "dateRange": $("#RoomTypeDateRange").val()
                }
                , page: {curr: 1}
            });
        });

        //未入库表格执行渲染
        table.render({
            elem: '#RoomTypeTable'
            , name: 'RoomTypeTable'
            , url: "/roomType/findTotalPrice"
            , toolbar: true
            , page: true
            , totalRow: true
            , limits: [10, 20, 30, 50, 100]
            , cols: [[
                {fixed: 'left', field: 'name', width: 160, title: '类型名称', totalRowText: '合计'}
                , {field: 'floors', title: '楼层'}
                , {field: 'size', title: '面积(m²)'}
                , {field: 'price', title: '收入(元)', totalRow: true}
            ]]
            , where: {
                "name": $("#RoomTypeName").val(),
                "dateRange": $("#RoomTypeDateRange").val()
            }
        });

        // ---------------------------------------------------------------
        //时间组件
        laydate.render({
            elem: '#RoomDateRange'
            , range: true
        });
        //监听已入库搜索
        $("#RoomSearch").on('click', function (data) {
            //执行重载
            table.reload('RoomTable', {
                method: 'post'
                , where: {
                    "name": $("#RoomName").val(),
                    "dateRange": $("#RoomDateRange").val()
                }
                , page: {curr: 1}
            });
        })

        //已入库表格执行渲染
        table.render({
            elem: '#RoomTable'
            , name: 'RoomTable'
            , url: "/room/findTotalPrice"
            , toolbar: true
            , totalRow: true
            , page: true
            , limits: [10, 20, 30, 50, 100]
            , cols: [[
                {fixed: 'left', field: 'name', width: 160, title: '房间号名称', totalRowText: '合计'}
                , {field: 'tname', title: '房间类型'}
                , {field: 'floors', title: '楼层'}
                , {field: 'size', title: '面积(m²)'}
                , {field: 'price', title: '收入(元)', totalRow: true}
            ]]
            , where: {
                "name": $("#RoomName").val(),
                "dateRange": $("#RoomDateRange").val()
            }
        });

        //必备
        $('.layui-btn.layuiadmin-btn-role').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>

